
// {bem_b,bem_e,bem_m,VueAndNvueStyleAttr,when}
@use "./mixin/mixins.scss" as *;

@import "common/index.scss";

$e-numberBox-hover-bgColor: #e6e6e6 !default;
$e-numberBox-disabled-color: #c8c9cc !default;
$e-numberBox-disabled-bgColor: #f7f8fa !default;
$e-numberBox-plus-radius: 4px !default;
$e-numberBox-minus-radius: 4px !default;
$e-numberBox-input-text-align: center !default;
$e-numberBox-input-font-size: 15px !default;
$e-numberBox-input-padding: 0 !default;
$e-numberBox-input-margin: 0 2px !default;
$e-numberBox-input-disabled-color: #c8c9cc !default;
$e-numberBox-input-disabled-bgColor: #f2f3f5 !default;

@include bem_b(number-box) {
  @include flex(row);
  align-items: center;
  @include bem_e(slot) {
    /* #ifndef APP-NVUE */
    touch-action: none;
    /* #endif */
  }

  &__plus,
  &__minus {
    width: 35px;
    @include flex;
    justify-content: center;
    align-items: center;
    /* #ifndef APP-NVUE */
    touch-action: none;
    /* #endif */

    &--hover {
      background-color: $e-numberBox-hover-bgColor !important;
    }

    &--disabled {
      color: $e-numberBox-disabled-color;
      background-color: $e-numberBox-disabled-bgColor;
    }
  }

  @include bem_e(plus) {
    border-top-right-radius: $e-numberBox-plus-radius;
    border-bottom-right-radius: $e-numberBox-plus-radius;
  }

  @include bem_e(minus) {
    border-top-left-radius: $e-numberBox-minus-radius;
    border-bottom-left-radius: $e-numberBox-minus-radius;
  }

  @include bem_e(input) {
    position: relative;
    text-align: $e-numberBox-input-text-align;
    font-size: $e-numberBox-input-font-size;
    padding: $e-numberBox-input-padding;
    margin: $e-numberBox-input-margin;
    @include flex;
    align-items: center;
    justify-content: center;

    &--disabled {
      color: $e-numberBox-input-disabled-color;
      background-color: $e-numberBox-input-disabled-bgColor;
    }
  }
}
